<template>

	<view class="search">
		<!-- 搜索区域 -->
		<view class="header">
			<view class="input_content">
				<view class="input_box">
					<image src="../../static/icons/zjc/search_icon@2x.png" mode="" class="search_icon"></image>
					<input type="text" value="" placeholder="输入门店店名称" />
				</view>
				<navigator url="../pageMap/pageMap">
					<image src="../../static/icons/zjc/icon_select_icon@2x.png" class="select"></image>
				</navigator>
			</view>
			<view class="select_content">
				<view class="options">
					<view class="selected" type="primary" v-for="(item,index) in showName" :key="item"
						@tap="currentIndex(index)">
						<text :class="{active:topIndex==index}">
							{{item}}
						</text>
						<image src="../../static/icons/zjc/Button_pull-down@2x.png" mode="" class="pull"></image>
					</view>
				</view>
				<view class="">
					<view class="list">
						<template v-for="(a,b) in showArr">
						<view class="list_title"  :key="a._id" v-if="topIndex<2&&topIndex>=0"
							@tap="checkedClass(b)">
							<text class="item sort" :data-name="a.name" @tap="checkedName"
								:class="{activeClass:checkIndex==b}">
								{{a.name}}
							</text>
							<!-- 勾选标志 -->
							<image src="../../static/icons/zjc/icon_check@2x.png" mode="" class="check_image"
								v-if="checkIndex==b&&checkIndex!=0"></image>
							<view class="city" v-if="topIndex==1&&b==0">
								<text>切换城市</text>
								<navigator url="">
									<image src="../../static/icons/zjc/button_back_arrow2x.png" mode=""
										class="switch_city">
									</image>
								</navigator>
							</view>
						</view>
						</template>
						<view class="character_list" v-if="topIndex==2">
							<text class="character" v-for="(a) in showArr" :data-name="a.name" :key="a._id"
								@tap="checkedName">
								{{a.name}}
							</text>
							<view class="btn">
								<button type="default" class="reset" @tap="setReset">重置</button>
								<button type="default" class="finish" @tap="setFinish">完成</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="shade" v-if="topIndex>=0" @tap="closeList">
		</view>
		<!-- 门店区域  -->
		<view class="container">
			<navigator url="../carBeauty/carBeauty">
				<view class="store">
					<view class="store_image">
						<image src=""></image>
					</view>
					<view class="store_info">
						<view class="name">
							<text>赤兔养车工厂店</text>
						</view>
						<view class="address">
							<text>四川省成都市锦江区顺北路15号</text>
						</view>
						<view class="numbers">
							<text class="score">评分</text>
							<text class="num">5.0</text>
							<text class="form">订单</text>
							<text class="num">2.3万+</text>
						</view>
						<view class="tag">
							<text>赤兔工厂</text>
							<text>星级门店</text>
							<text>技师入驻</text>
						</view>
						<view class="serve">
							<text>免检查费</text>
							<text>加油优惠</text>
						</view>
					</view>
					<view class="store_distance">
						<text>2.4km</text>
						<navigator url="">
							<image src="../../static/icons/zjc/button_back_arrow2x.png" mode=""></image>
						</navigator>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showName: ["综合排序", "金牛区", "品质"], //显示在头部的分类
				topIndex: -1, //头部分类下标
				checkIndex: 0, //下拉列表分类下标
				//下拉列表分类数组
				SelectArr: [
					[{
							id: 1,
							name: "综合排序"
						},
						{
							id: 2,
							name: "距离最近"
						},
						{
							id: 3,
							name: "好评度最高"
						},
						{
							id: 4,
							name: "门店月售销量最高"
						},
						{
							id: 5,
							name: "等级优先"
						},
						{
							id: 6,
							name: "优惠活动"
						}
					],
					[{
							id: 1,
							name: "金牛区"
						},
						{
							id: 2,
							name: "青羊区"
						},
						{
							id: 3,
							name: "武侯区"
						},
						{
							id: 4,
							name: "锦江区"
						},
						{
							id: 5,
							name: "龙泉驿区"
						},
						{
							id: 6,
							name: "成华区"
						}
					],
					[{
							_id: 1,
							name: "五星好评"
						},
						{
							_id: 2,
							name: "信用良好"
						},
						{
							_id: 3,
							name: "点评高分"
						},
						{
							_id: 4,
							name: "技师门店"
						},
						{
							_id: 5,
							name: "品牌门店"
						},
					]
				]
			}
		},
		methods: {
			//切换当前顶部标题下标
			currentIndex(index) {
				this.topIndex = index;
				//重置选中名称下标
				this.checkIndex = -1;
			},
			//切换顶部标题
			checkedName(e) {
				this.$set(this.showName, this.topIndex, e.target.dataset.name);
			},
			//重置头部分类
			setReset() {
				this.showName = ["综合排序", "金牛区", "品质"];
			},
			//完成按钮
			setFinish() {
				this.topIndex = -1;
			},
			//显示勾选图片
			checkedClass(index) {
				this.checkIndex = index;
			},
			//点击遮罩层隐藏下拉列表
			closeList() {
				this.topIndex = -1;
			}

		},
		//当前页面显示下拉分类
		computed: {
			showArr() {
				return this.SelectArr[this.topIndex];
			}
		}
	}
</script>

<style>
	/* page {
		background-color: #ffffff;
	} */

	.header {
		position: fixed;
		top: 16rpx;
		left: 0;
	}

	.input_content {
		display: flex;
		justify-content: space-evenly;
	}

	.header input {
		width: 500rpx;
		height: 58rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.input_content .search_icon {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}

	.input_content .input_box {
		width: 550rpx;
		height: 58rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		display: flex;
	}

	.header .select {
		width: 60rpx;
		height: 60rpx;
	}

	.header .back {
		width: 62rpx;
		height: 62rpx;
	}

	.types {
		display: flex;
	}

	.types .pull-down {
		width: 30rpx;
		height: 30rpx;
	}

	.types .item {
		margin-left: 80rpx;
	}

	.types .sort {
		margin-left: 30rpx;
		color: #9b9b9b;
	}

	.options {
		display: flex;
		justify-content: space-evenly;
	}

	.select_content .item.sort {
		height: 65rpx;
		/* border-bottom: solid 1rpx #e2e2e2; */
		line-height: 65rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 24rpx;
	}

	.select_content .list {
		background-color: rgba(255, 255, 255, .5);
		width: 750rpx;
		/* border: 1rpx solid #4eac15; */
		background-color: #ffffff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;

	}

	.active {
		color: #f5610c;
		font-size: 24rpx;
	}

	.select_content .character {
		background-color: #e6e6e6;
		border-radius: 8rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
		line-height: 28rpx;
		color: #9e9e9e;
		padding: 10rpx 20rpx;
		margin-top: 18rpx;
	}

	.list .character_list {
		padding-top: 18rpx;
	}

	.list .list_title {
		display: flex;
		justify-content: space-between;
		border-bottom: solid 1rpx #e2e2e2;
	}

	.list_title .sort {
		display: block;
	}

	.list_title .city {
		font-size: 20rpx;
		color: #b6b6b6;
		display: flex;
	}

	.list_title .city text {
		line-height: 40rpx;
	}

	.list_title .switch_city {
		width: 40rpx;
		height: 40rpx;
	}

	.list_title .check_image {
		width: 40rpx;
		height: 40rpx;
	}

	.activeClass {
		color: #f5610c;
		font-size: 28rpx;
	}

	.pull {
		width: 40rpx;
		height: 40rpx;
	}

	.select_content .btn {
		display: flex;
		margin-top: 20rpx;
	}

	.btn .reset {
		width: 375rpx;
		height: 86rpx;
	}

	.btn .finish {
		width: 375rpx;
		height: 86rpx;
		background-color: #F5610C;
		color: #ffffff;
	}

	.container .store {
		width: 690rpx;
		margin: 16rpx auto 0;
		margin-top: 164rpx;
		border-bottom: 1px solid #cacaca;
		;
		display: flex;
	}


	.store .store_image {
		width: 160rpx;
		height: 160rpx;
		background-color: #4CD964;
	}

	.store .store_image image {
		width: 100%;
		height: 100%;
	}

	.store .store_info {
		margin-left: 20rpx;
	}

	.store_info .name {
		height: 40rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #222222;
	}

	.store_info .address {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #828282;
	}

	.store_info .numbers .score,
	.form {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #515151;
	}

	.store_info .numbers .num {
		font-size: 20rpx;
		color: #ee0f0f;
	}

	.store_info .tag text {
		font-size: 18rpx;
		line-height: 26rpx;
		color: #8c8c8c;
		border: 1rpx solid #707070;
		margin-left: 10rpx;
	}

	.store_info .serve text {
		height: 26rpx;
		background-color: #f5610c;
		border-radius: 4rpx;
		font-size: 18rpx;
		line-height: 26rpx;
		color: #ffffff;
		margin-left: 10rpx;
	}

	.store_distance {
		box-sizing: border-box;
		padding-top: 52rpx;
		margin-left: 80rpx;
		display: flex;
	}
	.store_distance image{
		width: 40rpx;
		height: 40rpx;
		vertical-align: bottom;
	}

	.select_content .options .active {
		font-size: 30rpx;
		color: #f5601c;
	}

	.shade {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 200rpx;
		left: 0;
		overflow: hidden;
		background-color: rgba(0, 0, 0, .3);
		z-index: -9999;
	}
</style>
